<!--
 * @Project_description: 富文本编辑器
-->
<style lang="scss" scoped>
	//@import url(); 引入公共css类
  .pages{
    min-height: 20vh;
  }
</style>
<template>
	<div class="pages">
    <sp-editor
        :toolbarConfig="toolbarConfig"
        @init="initEditor"
        @input="inputOver"
        @upinImage="upinImage"
        @upinVideo="upinVideo"
        @overMax="overMax"
        @addLink="addLink"
        @exportHtml="exportHtml"
    ></sp-editor>
  </div>
</template>

<script>
	// import引入的组件需要注入到对象中才能使用
	export default {
		name: 'kw-editor', //文件名
		components: {}, //组件
		props: {
      value: {
        type: String,
        default: ''
      }
    }, // props
		data() {
			// 这里存放数据
			return {
        toolbarConfig:{
          excludeKeys:['export','link','video'],

        }
      }
		},
		computed: {}, // 监听属性 类似于data概念
		watch: {}, // 监控data中的数据变化
		created() {}, // 生命周期 - 创建完成（可以访问当前this实例）
		mounted() {}, // 生命周期 - 挂载完成（可以访问DOM元素）
		// 方法集合
		methods: {
      /**
       * 获取输入内容
       * @param {Object} e {html,text} 内容的html文本，和text文本
       */
      inputOver(e) {
        this.$emit('input', e.html)
      },
      /**
       * 超出最大内容限制
       * @param {Object} e {html,text} 内容的html文本，和text文本
       */
      overMax(e) {

      },
      /**
       * 编辑器就绪
       * @param {Object} editor 编辑器实例，你可以自定义调用editor实例的方法
       * @tutorial editor组件 https://uniapp.dcloud.net.cn/component/editor.html#editor-%E7%BB%84%E4%BB%B6
       * @tutorial 相关api https://uniapp.dcloud.net.cn/api/media/editor-context.html
       */
      initEditor(editor) {
        this.editorIns = editor // 保存编辑器实例
        // 保存编辑器实例后，可以在此处获取后端数据，并赋值给编辑器初始化内容
        this.preRender()
      },
      preRender() {
        this.editorIns.setContents({
          html: this.value,
        })
      },
      /**
       * 直接运行示例工程插入图片无法正常显示的看这里
       * 因为插件默认采用云端存储图片的方式
       * 以$emit('upinImage', tempFiles, this.editorCtx)的方式回调
       * @param {Object} tempFiles
       * @param {Object} editorCtx
       */
      async upinImage(tempFiles, editorCtx) {
        let filePath
        // #ifdef MP-WEIXIN
         filePath = tempFiles[0].tempFilePath
        // 注意微信小程序的图片路径是在tempFilePath字段中
        // #endif

        // #ifndef MP-WEIXIN
         filePath = tempFiles[0].path
        // #endif
        let res=await  uni.$customHttp.upload('http://k-blockly.quwen.xyz/api/upload/image',filePath)
        if (res.编码 == 200) {
          editorCtx.insertImage({
            src: res.数据.地址,
            width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
          })
        }else{
          uni.showToast({
            title: '上传失败',
            icon: 'none',
          })
        }
      },
      /**
       * @param {string} tempFile
       * @param {Object} editorCtx
       */
      async upinVideo(tempFile, editorCtx) {
        let res=await  uni.$customHttp.upload('http://k-blockly.quwen.xyz/api/upload/image',tempFile)
        if (res.编码 == 200) {
          editorCtx.insertImage({
            src: res.数据.地址,
            width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
          })
        }else{
          uni.showToast({
            title: '上传失败',
            icon: 'none',
          })
        }
      },
      /**
       * 导出 - toolbar需要开启export工具
       * @param {string} e 导出的html内容
       */
      exportHtml(e) {
      },
      /**
       * 添加超链接
       * @param {Object} e { text: '链接描述', href: '链接地址' }
       */
      addLink(e) {

      }
		},
		beforeCreate() {}, // 生命周期 - 创建之前
		beforeMount() {}, // 生命周期 - 挂载之前
		beforeUpdate() {}, // 生命周期 - 更新之前
		updated() {}, // 生命周期 - 更新之后
		beforeDestroy() {}, // 生命周期 - 销毁之前
		destroyed() {}, // 生命周期 - 销毁完成
		activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发

	}
</script>
